import React, { useEffect, useRef, useState } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls, useGLTF } from '@react-three/drei';
import * as THREE from 'three';
import './DigitalHuman.css';
import i18n from '../vites/Home/i18n'
import { useTranslation } from 'react-i18next'
// 数字人模型组件
const DigitalHumanModel = ({ animationIndex }: { animationIndex: number }) => {
  const group = useRef<THREE.Group>(null); // 用于引用3D模型组
  const { scene, animations } = useGLTF('/public/modules/videoo.glb'); // 加载GLTF模型和动画
  const mixerRef = useRef<THREE.AnimationMixer | null>(null); // 动画混合器引用

  useEffect(() => {
    // 当场景、动画或动画索引变化时，初始化或更新动画
    if (!scene || !animations || animations.length === 0) return;

    mixerRef.current = new THREE.AnimationMixer(scene); // 创建动画混合器
    const clip = animations[animationIndex]; // 获取当前索引对应的动画片段
    const action = mixerRef.current.clipAction(clip); // 创建动画动作
    action.play(); // 播放动画

    return () => {
      // 组件卸载时停止动画
      action.stop();
    };
  }, [scene, animations, animationIndex]);

  // 每帧更新动画混合器
  useFrame((_, delta) => {
    mixerRef.current?.update(delta);
  });

  return (
    <primitive 
      object={scene} 
      scale={[2, 2, 2]}        // 模型缩放
      position={[0, -1.7, 0]}  // 模型位置
      rotation={[0, Math.PI / 40, 0]} // 模型旋转
    />
  );
};
// 主组件
const DigitalHuman = () => {
  const [animationIndex, setAnimationIndex] = useState(0); // 当前动画索引
  const [controlsEnabled, setControlsEnabled] = useState(true); // 是否启用轨道控制器

  useEffect(() => {
    // 初始化时从本地存储读取动画索引
    const ste = parseInt(localStorage.getItem('ste') || '0');
    setAnimationIndex(ste);
    // 监听自定义事件以更新动画索引
    const handleSteUpdate = (e: CustomEvent) => {
      setAnimationIndex(e.detail);
    };
    window.addEventListener('steUpdated', handleSteUpdate as EventListener);
    return () => {
      window.removeEventListener('steUpdated', handleSteUpdate as EventListener);
    };
  }, []);
  // 切换动画
  const toggleAnimation = (index: number) => {
    localStorage.setItem('ste', index.toString()); // 保存到本地存储
    setAnimationIndex(index); // 更新状态
    window.dispatchEvent(new CustomEvent('steUpdated', { detail: index })); // 触发事件
  };
// 使用i18n的翻译功能
  const { t } = useTranslation()
  return (
    <div className="container">
      {/* 动画切换按钮 */}
      <button onClick={() => toggleAnimation(0)} style={{ marginLeft: '10px' }}>
        {t('jump')}
      </button>
      <button onClick={() => toggleAnimation(1)} style={{ marginLeft: '10px' }}>
        {t('squat')}
      </button>

      {/* 3D画布 */}
      <Canvas style={{ height: 780, width: 550 }} camera={{ position: [0, 0, 10], fov: 50 }}>
        <ambientLight intensity={1} /> {/* 环境光 */}
        <directionalLight position={[10, 10, 10]} intensity={1} /> {/* 平行光 */}
        <DigitalHumanModel animationIndex={animationIndex} /> {/* 数字人模型 */}
        {controlsEnabled && <OrbitControls enableZoom enablePan />} {/* 轨道控制器 */}
      </Canvas>
    </div>
  );
};

export default DigitalHuman